<template>
  <div>
    <p>欢迎光临_vue开发的收银系统_水果店</p>
    苹果10￥/斤,折扣8折<br />
    请输入你要购买的斤数<input type="text" v-model="into"><br/>
    <button @click="info">结账买单</button><br/>
    结账单：总价：<span>{{cost1}}</span>￥元，折后价：<span>{{cost2}}</span>￥元，省了：<span
    >{{cost3}}</span>元
  </div>
</template>

<script>
export default {

  data() {
    return {
      into:'',
      cost1:'0',
      cost2:'0',
      cost3:'0'
    };
  },

  methods: {
    info(){
      let input = document.querySelector('input')
      let num = input.value
      this.cost1 = num*10
      this.cost2 = num*10*0.8
      this.cost3 = num*10*0.2
    }
  },
};
</script>

<style lang="scss" scoped>
</style>